<template>
	<view style="height: 140rpx;">
		<view class="content" :style="{zIndex}">
			<view class="tabber_box">
				<view v-for="(item,index) in tabBars" :key="index"
					:style="{width:`${ratio}%`,display:'flex',justifyContent:'space-around',margin: '24rpx 0'}">
					<view class="tabber_item" @click="onNav(item.pagePath)">
						<image v-if="currentPath === item.pagePath" :src="item.selectedIconPath"></image>
						<image v-else :src="item.iconPath"></image>
						<!-- <text
							:style="{color:currentPath === item.pagePath ? item.selectedColor : item.color}">{{item.name}}</text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			currentPath: { // 当前页面路径
				type: String,
				default: '/pages/index/index',
			},
			zIndex: { // 界面层级
				type: Number,
				default: 10
			}
 
		},
		data() {
			const color = '#FFFFFF66';
			const selectedColor = '#FFF';
			return {
				tabBars: [{
						name: '首页',
						iconPath: 'https://gd-hbimg.huaban.com/37739d2168adb6047d50d10332078615d4105973196c-VtLqs6_fw480webp',
						selectedIconPath: 'https://gd-hbimg.huaban.com/56b6e36ebdf15e6091e98d2048452c3d23ae4c4119f7-p6XSYM_fw480webp',
						pagePath: '/pages/index/index',
						color,
						selectedColor,
					},
					{
						name: '邀请',
						iconPath: 'https://gd-hbimg.huaban.com/aafe7992bba43bd07019f137bb8c3cfd8ea8cc6d1d08-eZBtEv_fw480webp',
						selectedIconPath: 'https://gd-hbimg.huaban.com/959b03109a845f75492d59efbbad697f727def341df6-OQVFFy_fw480webp',
						pagePath: '/pages/topic/topic',
						color,
						selectedColor,
					},
					{
						name: 'VIP',
						iconPath: 'https://gd-hbimg.huaban.com/f32b896bc339c62deb40c7f9bd6b66c1dd491e1a1953-1re7E3_fw480webp',
						selectedIconPath: 'https://gd-hbimg.huaban.com/f3548d08c86ffa4a9b284cd54b1f2c1b6c03b0c31a49-tuJc6E_fw480webp',
						pagePath: '/pages/my/my',
						color,
						selectedColor,
					},
				],
				ratio: 0,
				isLogin: false,
			}
		},
		mounted() {
			this.ratio = 100 / this.tabBars.length;
		},
		methods: {
			onNav(url) {
				if (this.currentPath !== url){
					uni.switchTab({
						url
					});
				}
			}
		}
	}
</script>
 
<style lang="less" scoped>
	.content {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 140rpx;
		.tabber_box {
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #151d3361;
			opacity: 0.7;
			padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx) ; // 适配iphoneX的底部
			padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx); /*兼容 IOS>11.2*/
			border-top-right-radius: 35px;
			border-top-left-radius: 35px;
			image {
				width: 55rpx;
				height: 55rpx;
				margin-bottom: 16rpx;
			}
 
			.tabber_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
			}
			
		}
	}
</style>